<template>
	<div class="">
		<t-cell-group>
			<t-cell class="onlyfont18" :title="username" :description="teamname" :right-icon="chevronRightIcon">
	    		<template #leftIcon>
	        		<t-avatar shape="circle" style="font-size: 40px;">
	        			<span style="font-size: 25px">{{username_f}}</span>
	        		</t-avatar>
	      		</template>
	    	</t-cell>
		</t-cell-group>
		<t-cell-group bordered>
		    <t-cell title="今日工资" @click="getSalary(0)" arrow hover class="onlyfont18">
		    	<template #leftIcon>
			        <t-icon name="component-dropdown" />
			    </template>
		    </t-cell>
		    <t-cell title="昨日工资" @click="getSalary(2)" arrow hover class="onlyfont18">
		    	<template #leftIcon>
			        <t-icon name="page-first" />
			    </template>
		    </t-cell>
		    <t-cell title="本月工资" @click="getSalary(3)" arrow hover class="onlyfont18">
		    	<template #leftIcon>
			        <t-icon name="system-log" />
			    </template>
		    </t-cell>
		    <t-cell title="上月工资" @click="getSalary(4)" arrow hover class="onlyfont18">
		    	<template #leftIcon>
			        <t-icon name="install-mobile" />
			    </template>
		    </t-cell>
		    <t-cell title="总计工资" @click="getSalary(1)" arrow hover class="onlyfont18">
		    	<template #leftIcon>
			        <t-icon name="calendar-1" />
			    </template>
		    </t-cell>
		</t-cell-group>

		<t-cell-group style="margin-top: 15px;" bordered>
		    <t-cell @click="logout" title="退出登录" arrow hover class="font18">
		    	<template #leftIcon>
			        <t-icon style="color: red" name="logout" />
			    </template>
		    </t-cell>
		    
		</t-cell-group>
	</div>
	<t-tab-bar v-model="activeValue"  @change="menuSelect" shape="round" theme="tag" :split="false">
	    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
	      <template #icon>
	        <t-icon :name="item.icon" />
	      </template>
	    </t-tab-bar-item>
	</t-tab-bar>
</template>
<script>
	import { UserFilled } from '@element-plus/icons-vue'
	export default {
		components: {
		    UserFilled
		},
		data() {
			return {
				activeValue: 'user',
				username: this.$TOOL.data.get("USER_INFO").userName,
				username_f: '',
				teamname: '当前登录：' + this.$TOOL.data.get("USER_INFO").teamName,
				list: [
				  { value: 'home', label: '首页', icon: 'home' },
				  { value: 'user', label: '我的', icon: 'user' },
				],
			}
		},
		watch:{
			
		},
		created: function() {
			this.username_f = this.username.substring(this.username.length - 1);
		},
		methods: {
			menuSelect(e) {
				console.log(e);
				if (e == 'home') {
					// 跳转个人中心
					this.$router.replace({
						path: '/'
					})
				} 
			},
			getSalary(total = 0) {
				if (total == 1) {
					this.$router.replace({
						path: '/salary',
						query: {
							total: total
						}
					})
				} else if(total == 2) {
					this.$router.replace({
						path: '/salary',
						query: {
							type: 'yestoday'
						}
					})
				} else if (total == 3) {
					this.$router.replace({
						path: '/salary',
						query: {
							type: 'month'
						}
					})
				} else if (total == 4) {
					this.$router.replace({
						path: '/salary',
						query: {
							type: 'lastmonth'
						}
					})
				} else {
					this.$router.replace({
						path: '/salary',
					})
				}
			},
			logout() {
				this.$TOOL.data.clear()
				this.$router.replace({path: '/login'});
			},
		}
	}
</script>
<style type="text/css">
	.el-footer {padding: 0px}
	.el-menu-item {width: 100%}
	.font18 {
		font-size: 18px;
	}
	.card-title {
        font-size: 18px;
    }
    .card-subtitle {
        font-size: 20px;
    }
    
    
</style>